import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Tooltip } from 'antd';
import moment from 'moment';
import StandardTable from '@/components/StandardTable';

@connect(({ integratedqueryns, loading }) => ({
  loading: loading.models.integratedqueryns,
  chargeBillListData: integratedqueryns.chargeBillListData, // 一次性收费列表数据
}))
@Form.create()
class EmpInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  jumpRouting = (targetRouter, baseInfoId) => {
    const { jumpRouting } = this.props;
    jumpRouting(targetRouter, baseInfoId);
  };

  render() {
    const { chargeBillListData, loading } = this.props;
    const columns = [
      {
        title: '账单编号',
        dataIndex: 'billNo',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'left',
          },
        }),
        onCell: () => ({ style: { textAlign: 'left' } }),
      },

      {
        title: '账单年月',
        dataIndex: 'billYm',
        onCell: () => ({ style: { textAlign: 'left' } }),
        onHeaderCell: () => ({ style: { textAlign: 'left', fontWeight: 'bold' } }),
        render: text => text && moment(text).format('YYYY-MM'),
        // render: val => `${`${val}`.substring(0, 4)}-${`${val}`.substring(4)}`,
      },
      {
        title: '账单状态',
        dataIndex: 'billStateName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'left',
          },
        }),
        onCell: () => ({ style: { textAlign: 'left' } }),
      },
      {
        title: '服务类型',
        dataIndex: 'serTypeName',
        onCell: () => ({ style: { textAlign: 'left' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'left' } }),
      },
      // {
      //   title: '账单金额',
      //   dataIndex: 'billAmo',
      //   onCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      // },
      {
        title: '账单金额',
        dataIndex: 'billAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'right' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
        // render: billAmo => (billAmo ? billAmo.toFixed(2) : null),
        render: (text, record) => (
          <Tooltip
            placement="top"
            title={
              <div>
                <p>
                  涉及人数：
                  {record.involvePersonNum}
                </p>
                <p>
                  代收社保：
                  {record.agtsrvIns ? record.agtsrvIns.toFixed(2) : null}
                </p>
                <p>
                  代收公积金：
                  {record.agtsrvAccu ? record.agtsrvAccu.toFixed(2) : null}
                </p>
                <p>
                  代发工资：
                  {record.agtsrvWage ? record.agtsrvWage.toFixed(2) : null}
                </p>
                <p>
                  服务费：
                  {record.othCost ? record.othCost.toFixed(2) : null}
                </p>
              </div>
            }
          >
            <span>{text ? `${text.toFixed(2)}...` : null}</span>
          </Tooltip>
        ),
      },
      // {
      //   title: '状态',
      //   dataIndex: 'feeSta',
      //   onCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      //   onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
      // },
      {
        title: '账单生成时间',
        dataIndex: 'creTime',
        onCell: () => ({ style: { textAlign: 'left' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'left' } }),
        render: val => moment(val).format('YYYY-MM-DD HH:mm') || '无',
      },
      {
        title: '操作',
        dataIndex: 'operName',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        render: (text, record) => (
          <span
            style={{ color: '#1890FF', cursor: 'pointer' }}
            onClick={() => this.jumpRouting('billId', record.billId)}
          >
            查看
          </span>
        ),
      },
    ];

    return (
      <div>
        <Card
          style={{ marginBottom: 12 }}
          title={<span style={{ fontWeight: 'bolder' }}>收费账单</span>}
          bordered={false}
          extra={<a onClick={() => this.jumpRouting('billId')}>更多&gt;&gt;</a>}
          id="chargeBill"
        >
          <StandardTable
            selectedRows={[]}
            selectedRowKeys={[]}
            rowSelection={null}
            loading={loading}
            data={chargeBillListData}
            columns={columns}
            rowKey="billId"
            pagination={false}
          />
        </Card>
      </div>
    );
  }
}
export default EmpInfor;
